<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简书首页</title>
    <link rel="stylesheet" href="../js/iconfont/iconfont.css">
    <link rel="stylesheet" href="../js/inconfont2/iconfont.css">
    <link rel="stylesheet" href="../js/iconfont3/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            outline: none;
            box-sizing: border-box;
            list-style: none;
            border: 0;
        }
        
        #wrap {
            height: 75px;
            width: 1700px;
            border: 1px solid #ffffff;
            text-align: center;
            border-bottom-color: #f0f0f0;
        }

        #wrap1{
            padding-right: 1550px;
        }

         #wrap2 {
            height: 36px;
            width: 450px;
            margin-top: -55px;
            margin-left: 170px;
            font-size: 20px;
        }

        .home{
            color: #DD7260;
        }

        #wrap2 span{
            padding-left: 35px;
        }

        .search{
            height: 50px;
            width: 200px;
            background-color: #EEEEEE;
            border: 2px solid #EEEEEE;
            border-radius: 40px;
            margin-top: -45px;
            margin-left: 540px;
            font-size: 20px;
        }

        .search input{
            width: 150px;
            height: 40px;
            background-color: #EEEEEE;
            border-radius: 30px;
            padding-top: 7px;
            font-size:16px;
            color: #757575;
            padding-left: 15px;
        }

        .fz{
            font-size: 22px;
            color: #757575;
            padding-top: 30px;
        }

        #wrap3{
            width: 40px;
            height: 40px;
            color: #969696;
            font-size: 25px;
            margin-top: -45px;
            margin-left: 1150px;
        }

        #wrap4{
            width: 170px;
            height: 50px;
            font-size: 25px;
            margin-top: -45px;
            margin-left: 1180px;
            text-align: center;
            padding-top: 8px;
        }

        #register{
            color: #A8A8A8;
            font-size: 19px;
            margin-top: -40px;
            margin-left: 1050px;
            text-align: center;
            
        }

        #login{
            width: 110px;
            height: 40px;
            border: 1px solid #F29484   ;
            font-size: 20px;
            font-weight: bold;
            color: #D89286;
            margin-top: -40px;
            margin-left: 1440px;
            margin-top: -35px;
            padding-top: 5px;
            text-align: center;
            border-radius: 40px;
        }

        #article{
            width: 125px;
            height: 50px;
            background-color: #EA6F5A;
            color: #ffffff;
            font-size: 20px;
            margin-top: -40px;
            margin-left: 1570px;
            margin-top: -45px;
            padding-top: 9px;
            text-align: center;
            border-radius: 40px;
        }

        #wrap5{
            cursor: pointer;
            transition: all 0.6s;
        }

        #wrap5:hover{
            transform: scale(1.1);
            -webkit-transform: scale(1.1);
        }

        .fz2{
            font-size: 22px;
            color: #ffffff;
            padding-top: 30px;
        }

        #wrap6{
            width: 370px;
            height: 120px;
            border:1px solid;
            border-color:#F0F0F0;
            margin-left: 49px;
        }

        #code{
            padding-top: 19px;
            padding-right: 220px;
            cursor: pointer;
            transition: all 0.6s;
        }

        #code:hover{
            transform: scale(1.4);
            -webkit-transform: scale(1.1);
        }

        #download{
            width: 200px;
            height: 80px;
            font-size: 19px;
            margin-top: -85px;
            margin-left: 140px;
        }

        .fz3{
            font-size: 22px;
            padding-top: 30px;
            padding-left: 10px;
        }

        #download span{
            font-size: 16px;
            color: #999999;
        }
        
        .content {
            width: 80%;
            margin: 0 auto 0;
        }
        
        .content section {
            width: 670px;
            float: left;
            height: 600px;
            margin-top: 56px;
            margin-right: 40px;
        }
        
        .content aside {
            width: 470px;
            float: left;
            margin-top: 56px;
            height: 600px;
        }

        .clearfix::after {
            content: '';
            display: table;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        
        footer input{
            margin-bottom: -100px;
        }

        a:link { 
            text-decoration: none;color: rgb(108, 108, 122)
        }
　　    a:active { 
            text-decoration:blink
        }
    　　 a:hover {
            text-decoration:underline;color: red
        }
    　　 a:visited { 
            text-decoration: none;color: green
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div id="wrap1">
            <input type="image" src="../img/logo.png" height="75px">
        </div>    

            <div id="wrap2">
                <span class="home">首页</span>
                <span class="App">下载App</span>
            </div>

            <div class="search">
                <input type="search" placeholder="搜索">
                <span class="iconfont fz">&#xe616;</span>
            </div>

            <div id="wrap3">
                <span>Aa</span>
            </div>

            <div id="wrap4">
                <input type="image" src="../img/diamond.png" width="70px">
            </div>
            
            <div id="register">
                登录    
            </div>

            <div id="login">
                注册
            </div>

            <div id="article">
                <span class="iconfont fz2">&#xe667;</span>
                写文章
                <span class="iconfont fz2">&#xe666;</span>
            </div>

        <div class="content clearfix">
            <section >
                <input type="image" src="../img/home.png" width="670px">
            </section>

            <aside>
                <div id="wrap5">
                    <input type="image" src="../img/recom01.png" width="370px" height="65">
                    <input type="image" src="../img/recom02.png" width="370px" height="65">
                    <input type="image" src="../img/recom03.png" width="370px" height="65">
                    <input type="image" src="../img/recom04.png" width="370px" height="65">
                </div>

                <div id="wrap6">
                    <div id="code">
                        <input type="image" src="../img/code.png" width="80px" height="80px">
                    </div>
                    
                    <div id="download">
                        下载简书手机App
                        <span class="iconfont fz3">&#xe607;</span>
                        <span>随时随地发现和创作内容</span>
                    </div>
                </div>
            </aside>
        </div>

        <footer>
            <div class="footer">

                <a href="#">关于简书 </a>
                <a href="#">· 联系我们</a>
                <a href="#">· 加入我们</a>
                <a href="#">· 简书出版 </a>
                <a href="#">· 品牌与徽标</a>
                <a href="#">· 帮助中心 </a>
                <a href="#">· 合作伙伴</a>

                <div class="footerC">
                        <span>©2012-2020 上海佰集信息科技有限公司 / 简书 / 沪ICP备11018329号-5 / Smrz 沪公网安备31010402002252号/<br>
                            Wxb Weifa 简书网举报电话：021-34770013 / Fanzha 亲爱的市民朋<br>
                            友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听 / Zggsrz</span>
                </div>
                </div>
        </footer>
    </div>
</body>

</html>
